<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="170px">
      <el-divider content-position="center">小微企业</el-divider>
      <el-form-item label="法人姓名" prop="legalName">
        <el-input v-model="form.legalName" placeholder="请输入法人姓名" />
      </el-form-item>
            <el-form-item label="法人身份证号码" prop="legalLicenceNo">
              <el-input v-model="form.legalLicenceNo" placeholder="请输入身份证号码" />
            </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入预留手机号" />
      </el-form-item>
<!--      <el-form-item label="账户姓名" prop="bankName">-->
<!--        <el-input v-model="form.bankName" placeholder="请输入账户姓名" />-->
<!--      </el-form-item>-->
      <el-form-item label="银行卡号" prop="bankCardNo">
        <el-input v-model="form.bankCardNo" placeholder="请输入银行卡号" />
      </el-form-item>
      <el-form-item label="开户行/开户总行编码" prop="bankCode">
        <el-select v-model="form.bankCode" placeholder="请选择开户行" filterable>
          <el-option
            v-for="item in bankOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="身份证正面/法人" prop="legalLicenceFrontUrl">
        <image-upload v-model="form.legalLicenceFrontUrl" :limit="1" />
        入网文件：<el-input  disabled v-model="form.netFrontUrl" placeholder="" />
        <el-button type="primary" @click="handleUploadImage('1')">入网上传按钮</el-button>
      </el-form-item>
      <el-form-item label="身份证反面/法人" prop="legalLicenceBackUrl">
        <image-upload v-model="form.legalLicenceBackUrl" :limit="1" />
        入网文件：<el-input  disabled v-model="form.netBackUrl" placeholder="" />
        <el-button type="primary" @click="handleUploadImage('2')">入网上传按钮</el-button>
      </el-form-item>
<!--&lt;!&ndash;      <el-form-item label="法人证件有效期开始时间" prop="startDate">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-input v-model="form.startDate" placeholder="请输入法人证件有效期开始时间" />&ndash;&gt;-->
<!--&lt;!&ndash;      </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-form-item label="法人证件有效期截止时间" prop="expired">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-input v-model="form.expired" placeholder="请输入法人证件有效期截止时间" />&ndash;&gt;-->
<!--&lt;!&ndash;      </el-form-item>&ndash;&gt;-->
<!--      <el-form-item label="法人证件居住地址" prop="legalAddress">-->
<!--        <el-input v-model="form.legalAddress" placeholder="请输入法人证件居住地址" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="统一社会信息代码(商户证件号)" prop="licenceNo">-->
<!--        <el-input v-model="form.licenceNo" placeholder="请输入统一社会信息代码" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="营业执照地址" prop="licenceUrl">-->
<!--        <image-upload v-model="form.licenceUrl" :limit="1" />-->
<!--        入网文件：<el-input  disabled v-model="form.netLicenceUrl" placeholder="" />-->
<!--        <el-button type="primary" @click="handleUploadImage('3')">入网上传按钮</el-button>-->
<!--      </el-form-item>-->
      <el-form-item label="商户名称" prop="signName">
        <el-input v-model="form.signName" placeholder="请输入商户名称" />
      </el-form-item>
      <el-form-item label="商户简称" prop="shortName">
        <el-input v-model="form.shortName" placeholder="请输入商户简称" />
      </el-form-item>
<!--      <el-form-item label="开户许可证照片" prop="openAccountLicenceUrl">-->
<!--        <image-upload v-model="form.openAccountLicenceUrl" :limit="1" />-->
<!--        入网文件：<el-input  disabled v-model="form.netOpenAccountLicenceUrl" placeholder="" />-->
<!--        <el-button type="primary" @click="handleUploadImage('4')">入网上传按钮</el-button>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="联系人姓名" prop="contactName">-->
<!--        <el-input v-model="form.contactName" placeholder="请输入联系人姓名" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="联系人证件号码" prop="contactLicenceNo">-->
<!--        <el-input v-model="form.contactLicenceNo" placeholder="请输入联系人证件号码" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="联系人手机号" prop="contactMobile">-->
<!--        <el-input v-model="form.contactMobile" placeholder="请输入联系人手机号" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="联系人邮箱" prop="contactEmail">-->
<!--        <el-input v-model="form.contactEmail" placeholder="请输入联系人邮箱" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="管理员邮箱" prop="adminEmail">-->
<!--        <el-input v-model="form.adminEmail" placeholder="请输入管理员邮箱" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="管理员电话" prop="adminMobile">-->
<!--        <el-input v-model="form.adminMobile" placeholder="请输入管理员电话" />-->
<!--      </el-form-item>-->
      <el-form-item label="所在地区" prop="area">
        <el-cascader
          v-model="selectedArea"
          :options="regionData"
          :props="areaProps"
          placeholder="请选择所在地区"
          clearable
          filterable          style="width: 100%"
          @change="handleAreaChange"
        ></el-cascader>

      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入详细地址" />
      </el-form-item>
      <el-divider content-position="center">
        <slot>签约请求信息</slot>
      </el-divider>


      <el-form-item label="商户号" prop="merchantNo">
        <el-input v-model="form.merchantNo"  disabled placeholder="请输入商户号" />
      </el-form-item>
      <el-form-item label="请求号" prop="requestNo">
        <el-input v-model="form.requestNo"  disabled placeholder="请输入请求号" />
      </el-form-item>
      <el-form-item label="审核状态" prop="applicationStatus">
        <el-tag v-if="form.applicationStatus === 'REVIEWING'">申请审核中</el-tag>
        <el-tag v-else-if="form.applicationStatus === 'REVIEW_BACK'" type="danger">申请已驳回</el-tag>
        <el-tag v-else-if="form.applicationStatus === 'AUTHENTICITY_VERIFYING'">真实性验证中</el-tag>
        <el-tag v-else-if="form.applicationStatus === 'AGREEMENT_SIGNING'">协议待签署</el-tag>
        <el-tag v-else-if="form.applicationStatus === 'BUSINESS_OPENING'">业务开通中</el-tag>
        <el-tag v-else-if="form.applicationStatus === 'COMPLETED'" type="success">申请已完成</el-tag>
        <el-tag v-else>未知状态</el-tag>
      </el-form-item>
      <el-form-item label="审核编号" prop="applicationNo">
        <el-input v-model="form.applicationNo" disabled placeholder="请输入审核编号" />
      </el-form-item>
<!--      <el-form-item label="签约地址" prop="agreementSignUrl">-->
<!--        <el-input v-model="form.agreementSignUrl" disabled placeholder="请输入签约地址" />-->
<!--      </el-form-item>-->
      <el-form-item label="签约请求备注" prop="remark">
        <el-input v-model="form.remark" disabled  placeholder="签约请求备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button type="primary" @click="submitFormQy">签约</el-button>
      <el-button type="primary" @click="submitFormStatus">更新最新签约状态</el-button>

    </div>
  </div>
</template>

<script>
import {
  findByUserId,
  addRealName,
  updateRealName,
  uploadUrl,
  addRegiserSignMemerchant, queryTransparent
} from '@/api/course/realName'
import store from '../../../store'
import regionData from './region.json'
import bankData from './bank.json'
export default {
  name: "RealNamexw",
  data() {
    return {
      // 银行数据
      bankOptions: bankData,
      // 地区数据
      regionData: regionData,
      // 已选中的地区
      selectedArea: [],
      // 地区选择器属性
      areaProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        emitPath: true,
        expandTrigger: 'hover'
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 实名认证表格数据
      realNameList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        legalName: null,
        province: null,
        city: null,
        district: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {

    // 根据省市区编码设置级联选择器的值
    setAreaValue() {
      this.selectedArea = [];
      if (this.form.province) {
        // 查找省份
        const province = this.regionData.find(item => item.id == this.form.province);
        if (province) {
          this.selectedArea.push(province.id);

          // 查找城市
          if (this.form.city && province.children) {
            const city = province.children.find(item => item.id == this.form.city);
            if (city) {
              this.selectedArea.push(city.id);

              // 查找区域
              if (this.form.district && city.children) {
                const district = city.children.find(item => item.id == this.form.district);
                if (district) {
                  this.selectedArea.push(district.id);
                }
              }
            }
          }
        }
      }
    },
    handleAreaChange(val) {
      if (val && val.length > 0) {
        // 根据选择的地区更新表单中的省市区编码字段
        this.form.province = val[0] || '';
        this.form.city = val[1] || '';
        this.form.district = val[2] || '';
      } else {
        this.form.province = '';
        this.form.city = '';
        this.form.district = '';
      }
    },
    handleUploadImage(fileType){
      uploadUrl({
        id:this.form.id,
        fileType: fileType,
      }).then(response => {
        // 提示上传成功
        this.$message.success("上传成功");
        //
        this.getList();

      });


    },
    /** 查询实名认证列表 */
    getList() {
      this.loading = true;
      const userId = store.getters.id
       findByUserId(userId).then((response) => {
        this.form = response.data;
         this.setAreaValue();
        this.open = true;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        legalName: null,
        mobile: null,
        bankAccountType: null,
        bankName: null,
        bankCardNo: null,
        bankCode: null,
        legalLicenceNo: null,
        legalLicenceFrontUrl: null,
        legalLicenceBackUrl: null,
        startDate: null,
        expired: null,
        legalAddress: null,
        signType: null,
        licenceNo: null,
        licenceUrl: null,
        signName: null,
        shortName: null,
        openAccountLicenceUrl: null,
        contactName: null,
        contactLicenceNo: null,
        contactMobile: null,
        contactEmail: null,
        province: null,
        city: null,
        district: null,
        address: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        console.log("[ form ] >", this.form);
        if (valid) {
          if (this.form.id != null) {
            updateRealName(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addRealName(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    submitFormQy(){
      addRegiserSignMemerchant(this.form).then(response => {
        this.$modal.msgSuccess("操作成功");
        this.getList();
      });
    },
    submitFormStatus(){
      queryTransparent({
        id:this.form.id
      }).then(response => {
        this.$modal.msgSuccess("操作成功");
        this.getList();
      });
    }
  },

};
</script>
